<template>
    <div class="container">
        <img id="drageImg" src="/machine/machine_red_1.jpg" @click="creatMachine" style="width: 50px;" alt="">
        <img src="/machine/machine_red_1.jpg" style="width: 50px;" alt="">
        <img src="/machine/machine_red_1.jpg" style="width: 50px;" alt="">
        <img src="/machine/machine_red_1.jpg" style="width: 50px;" alt="">
        <img src="/machine/machine_red_1.jpg" style="width: 50px;" alt="">
        <img src="/machine/machine_red_1.jpg" style="width: 50px;" alt="">
    </div>
</template>

<script setup lang="ts" name="Panel">
import { ref, onMounted } from "vue";
import * as THREE from 'three';
import {bus } from '@/mitt'


var geometry = new THREE.SphereGeometry(2, 10, 10);
var material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
var mesh = new THREE.Mesh(geometry, material);

import Drag from "@/modules/Drag";
import Viewer from '@/modules/Viewer';
// let emitter = mitt();
let drag : Drag;

const selectedModel = ref();
// 模型列表
let models = ref({
    box: new THREE.BoxGeometry(50, 50, 50),
    cylinder: new THREE.CylinderGeometry(25, 25, 50, 20),
})

onMounted(() => {
})
const creatMachine = (event:any) => {
    
    bus.emit('drageObj',mesh);

}
</script>
<style scoped>
.container {
    display: flex;
    justify-content: space-between;
}
</style>
